<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top: 10px">
    <div slot="header" class="header">
      <el-tabs class="demo-tabs" v-model="activeName">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visite"></el-tab-pane>
      </el-tabs>
      <!--右侧结构-->
      <div class="right">
        <span @click="today">今日</span>
        <span @click="week">本周</span>
        <span @click="moneth">本月</span>
        <span @click="year">今年</span>
        <!--日历-->
        <el-date-picker type="daterange" range-separator="-" start-placeholder="入住时间" end-placeholder="离开时间"
          size="small" v-model="timeList" />
      </div>
    </div>
    <!--卡片身体部分-->
    <el-row :gutter="20">
      <el-col :span="18" :offset="0">
        <v-chart :option="getOption()" style="height: 400px" autoresize></v-chart>
      </el-col>
      <el-col :span="6" :offset="0">
        <div>
          <p>门店{{activeName=='sale'?'销售额':'访问量'}}排名</p>
          <ul v-if="activeName=='sale'" class="sandv">
            <li class="sandvli" v-for="(item,index) in orderRank"><span :class="{ active: index < 3 }">{{item.no}}</span><span>{{item.name}}</span><span class="active1">{{item.count}}</span></li>
          </ul>
          <ul v-if="activeName=='visite'" class="sandv">
            <li class="sandvli" v-for="(item,index) in userRank"><span :class="{ active: index < 3 }">{{item.no}}</span><span>{{item.name}}</span><span class="active1">{{item.count}}</span></li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import dayjs from 'dayjs'
let timeList = ref([])
//收集选项卡的数据
let activeName = ref("sale");
const today = () => {
  console.log(dayjs().format('YYYY-MM-DD'));
  let start = dayjs().format('YYYY-MM-DD')
  let end = dayjs().format('YYYY-MM-DD')
  timeList.value = [start, end]
}
const week = () => {
  let start = dayjs().day(0).format('YYYY-MM-DD')
  let end = dayjs().day(6).format('YYYY-MM-DD')
  timeList.value = [start, end]
}
const moneth = () => {
  let start = dayjs().startOf('month').format('YYYY-MM-DD')
  let end = dayjs().endOf('month').format('YYYY-MM-DD')
  timeList.value = [start, end]
}
const year = () => {
  let start = dayjs().startOf('year').format('YYYY-MM-DD')
  let end = dayjs().endOf('year').format('YYYY-MM-DD')
  timeList.value = [start, end]
}

//********************************************* */
//左侧柱状图的配置项
const getOption = () => {
  return {
    //标题
    title: {
      text: activeName.value == "sale" ? "销售量" : "访问量",
    },
    //提示组件
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: props.x,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        //y轴线展示
        axisLine: {
          show: true,
        },
        //y轴的刻度

        axisTick: {
          show: true,
        },
      },
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data: activeName.value == "sale" ? props.saleArr : props.visiteArr,
        //柱条的颜色调试
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        //展示数值
        label: {
          show: true,
          //文本位置
          position: 'top',
          //旋转
          rotate: 20,
          color: 'yellowgreen'
        }
      },
    ],
  };
};

//接受父组件传递过来销售额与访问量数据
let props = defineProps(["saleArr", "visiteArr", "x", "orderRank", "userRank"]);
</script>

<style scoped>
.header {
  position: relative;
}

.right {
  position: absolute;
  right: 0;
  top: 10px;
}

.right span {
  margin: 0px 5px;
}
li{
list-style: none;
}
.sandv{
  display:flex;
  /* 自上而下 */
  flex-direction: column;
  /* justify-content: space-around */
}
.sandv .sandvli{
  height: 50px;
  line-height: 50px;
}
span{
  float: left;
  font-size: 14px;
  font-weight: 700;
}
.active1{
  float: right;
}
li span:first-child{
  margin-top: 15px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  margin-right: 10px;
}
li span.active {
  border-radius: 50%;
  background: black;
  color: white;
}
</style>